<template>
  <div class="skeleton-loader">
    <div class="skeleton-loader__item" :style="{ width, height, borderRadius }"></div>
  </div>
</template>

<script setup>
defineProps({
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '20px'
  },
  borderRadius: {
    type: String,
    default: 'var(--radius-md)'
  }
});
</script>

<style scoped>
.skeleton-loader {
  display: inline-block;
  width: 100%;
}

.skeleton-loader__item {
  background: linear-gradient(
    90deg,
    rgba(26, 41, 66, 0.6) 0%,
    rgba(77, 208, 225, 0.15) 50%,
    rgba(26, 41, 66, 0.6) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style>
